<template>
  <div class="other frame_content">
    <div class="dl-second-nav" style="height: 750px;">
      <div class="dl-second-tree" id="J_webTree">
        <ul
          class="bui-side-menu bui-menu"
          aria-disabled="false"
          style="height: 750px;"
          aria-pressed="false"
        >
          <li
            class="bui-menu-item menu-second"
            aria-disabled="false"
            data-id="menu-item1"
            aria-pressed="false"
          >
            <div class="bui-menu-title">
              <s></s>
              <span class="bui-menu-title-text">其它设置</span>
            </div>
            <ul class="bui-menu" aria-disabled="false" aria-pressed="false">
              <router-link
                class="bui-menu-item menu-leaf"
                v-for="otherList in otherLists"
                tag="li"
                :to="otherList.href"
                :key="otherList.id"
                active-class="other-act"
              >
                <a href="">
                  <em>{{ otherList.name }}</em>
                </a>
              </router-link>
            </ul>
          </li>
        </ul>
      </div>
      <div class="dl-second-slib-con">
        <div class="dl-second-slib"></div>
      </div>
    </div>
    <div class="dl-inner-tab" id="J_webTab">
      <div
        class="bui-nav-tab"
        aria-disabled="false"
        style="height: 236px;"
        aria-pressed="false"
      >
        <div class="tab-nav-bar">
          <s class="tab-nav-arrow arrow-left"></s>
          <div class="tab-nav-wrapper">
            <div class="tab-nav-inner">
              <ul class="tab-nav-list" style="width: 700px; left: 0px;">
                <li
                  class="bui-nav-tab-item tab-nav-actived"
                  aria-disabled="false"
                  title="管理员信息"
                  aria-pressed="false"
                >
                  <span class="tab-item-title">管理员信息</span>
                  <s class="tab-item-close"></s>
                </li>
              </ul>
            </div>
          </div>
          <s class="tab-nav-arrow arrow-right"></s>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      otherLists: [
        { id: 1, name: "管理员信息", href: "/index/other/admin" },
        { id: 2, name: "虚假用户", href: "/index/other/falseuser" },
        { id: 3, name: "敏感操作日志", href: "/index/other/log" },
        { id: 4, name: "手动上分", href: "/index/other/upperscore" },
        { id: 5, name: "手动下分", href: "/index/other/lowerscore" },
        { id: 6, name: "历史上分记录", href: "/index/other/toprecord" },
        { id: 7, name: "历史下分记录", href: "/index/other/subrecord" },
        { id: 8, name: "赛车(手动开奖退还)", href: "/index/other/aracing" },
        { id: 9, name: "飞艇(手动开奖退还)", href: "/index/other/airship" },
        { id: 10, name: "时彩(手动开奖退还)", href: "/index/other/gambling" },
        { id: 11, name: "极速(手动开奖退还)", href: "/index/other/rapidly" },
        {
          id: 12,
          name: "澳10(手动开奖退还)",
          href: "/index/other/australia10"
        },
        { id: 13, name: "澳5(手动开奖退还)", href: "/index/other/australia5" },
        { id: 14, name: "文章列表", href: "/index/other/articleList" },
        { id: 15, name: "发布文章", href: "/index/other/publisharticle" },
        { id: 16, name: "账户充值", href: "/index/other/recharge" }
      ]
    };
  }
};
</script>

<style>
html,
body,
.content,
.dl-tab-item,
.dl-inner-tab,
.dl-second-nav,
.dl-second-tree,
.bui-side-menu,
.bui-nav-tab,
.tab-content-container {
  height: 100% !important;
}
.other {
  font-family: "SimSun", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.other a {
  text-decoration: none;
}
.other li {
  line-height: 22px;
}
.dl-second-nav {
  float: left;
  width: 150px;
  position: relative;
  padding-top: 5px;
  background-color: #e8e9ee;
}
.dl-second-tree {
  width: 150px;
  float: left;
}
.bui-side-menu {
  height: 100%;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 3px;
}
.bui-menu {
  list-style: none;
  margin: 0;
}
.bui-side-menu .menu-second {
  padding-top: 1px;
  outline: 0;
}
.bui-menu .bui-menu-item {
  cursor: pointer;
}
.bui-side-menu .bui-menu-title {
  margin: 0 1px;
  background-position: 0 15px;
  height: 17px;
  color: #636775;
  font-weight: bold;
  overflow: hidden;
  line-height: 25px;
  vertical-align: middle;
  padding: 8px 0 5px 5px;
}

.bui-side-menu .bui-menu-title-text {
  float: left;
  overflow: hidden;
  height: 14px;
  line-height: 14px;
  display: block;
  _margin-top: -2px;
}
.bui-side-menu .menu-second .bui-menu {
  margin-top: 5px;
}
.bui-side-menu .menu-second .bui-menu-item {
  outline: 0;
  line-height: 20px;
}
.bui-side-menu .menu-second .bui-menu-item a {
  height: 20px;
  text-indent: 24px;
  overflow: hidden;
  margin-bottom: 5px;
  display: block;
}
.bui-side-menu .menu-second .bui-menu-item a em {
  display: block;
  margin: 0 1px;
  font-style: normal;
  text-align: left;
  overflow: hidden;
  height: 19px;
  line-height: 22px;
  cursor: pointer;
  _line-height: 20px;
  border-radius: 4px;
}
.dl-second-nav .bui-menu .other-act a em {
  color: #fff;
  background: #36a;
}
.bui-side-menu a {
  color: #5c637b;
  outline: 0;
}
.dl-second-nav .bui-menu .bui-menu-item a:hover {
  color: #414da7;
}
.bui-side-menu .bui-menu-title,
.bui-side-menu .bui-menu-title s,
.bui-side-menu .menu-second a,
.bui-side-menu .menu-second em {
  background: url(../../../images/T1GgTxXm4qXXaGyjny-500-188.png) -9999px -9999px
    no-repeat;
}
.tab-nav-bar,
.tab-nav-arrow,
.tab-nav-wrapper,
.tab-nav-inner,
.bui-nav-tab-item,
.tab-item-close {
  background: url(../../../images/T1SLHBXaXmXXXF.Nbe-140-120.gif) -9999px -9999px
    no-repeat;
}
.bui-side-menu .bui-menu-title s {
  width: 10px;
  height: 10px;
  overflow: hidden;
  display: block;
  float: left;
  margin-right: 5px;
  margin-top: 1px;
  background-position: 0 -71px;
}
.tab-nav-wrapper s {
  cursor: pointer;
}
.dl-second-slib {
  position: absolute;
  height: 100%;
  left: 148px;
  width: 6px;
  cursor: pointer;
  top: 25px;
  border-left: 1px solid #c3c3d6;
  border-radius: 2px;
  background: url(../../../images/left-slib.gif) no-repeat 0 center transparent;
}
.dl-inner-tab {
  margin-left: 150px;
}
.dl-inner-tab .bui-nav-tab,
.dl-inner-tab .tab-nav-inner {
  background-color: #e8e9ee;
}
.dl-inner-tab .bui-nav-tab {
  padding-top: 5px;
}
.tab-nav-bar {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  height: 21px;
  background-position: 0 20px;
  background-repeat: repeat-x;
}
.arrow-left {
  background-position: 0 -60px;
  left: 5px;
}
.tab-nav-arrow {
  display: block;
  position: absolute;
  text-decoration: none;
  overflow: hidden;
  width: 13px;
  height: 13px;
  text-indent: -99px;
  top: 4px;
}
.tab-nav-wrapper {
  margin: 0 23px;
  background-position: 0 -100px;
  background-repeat: repeat-x;
}
.tab-nav-inner {
  background-position: 0 20px;
  background-repeat: repeat-x;
  background-color: #e2eaf4;
  margin: 0 2px;
  overflow: hidden;
  position: relative;
}
.tab-nav-list {
  position: relative;
  left: 0;
  padding: 0;
  margin: 0;
  *zoom: 1;
}

.bui-nav-tab-item {
  background-position: 0 -4px;
  color: #263e74;
  float: left;
  width: 87px;
  height: 21px;
  margin-right: -12px;
  position: relative;
  cursor: pointer;
  padding: 0 33px 0 20px;
  z-index: 1;
  overflow: hidden;
}
.tab-nav-actived {
  background-position: 0 -29px;
  z-index: 2;
}
.tab-item-title {
  cursor: pointer;
}
.tab-item-close {
  display: block;
  position: absolute;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  width: 13px;
  height: 13px;
  text-indent: -99px;
  top: 4px;
  right: 17px;
  background-position: 0 -80px;
}
</style>
